<template>
  <el-dialog title="" :close-on-press-escape="true" :close-on-click-modal="true"
             :visible.sync="visible" :modal="true"
             width="60%">
    <div class="main" v-loading="loading">
      <h2>{{ dataForm.title }}</h2>
      <label>{{ dataForm.date }}</label>
      <div class="row">
        <div v-html="dataForm.body_text"></div>
      </div>
      <el-col :span="24">
        <JnpfUploadFile v-model="dataForm.files" v-if="dataForm.files !=null"
                        disabled
                        detailed :fileSize="10" sizeUnit="MB" :limit="9" pathType="defaultPath" :isAccount="0"
                        buttonText="点击上传" :style='{"width":"100%","margin":"15px 0px"}'>
        </JnpfUploadFile>
      </el-col>
    </div>
  </el-dialog>
</template>

<script>
import axios from 'axios';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Detail",
  data() {
    return {
      visible: false,
      loading: false,
      files: [],
      title: "",
      dataForm: {
        id: '',
        title: '',
        data: '',
        body_text: '',
        description: '',
        img: '',
        files: [],
      }
    }
  },
  methods: {
    init(id, title) {
      this.dataForm.id = id
      this.title = title + '详情'
      this.visible = true
      this.loading = true
      const url = `/cloud-api2/portal/notice_detail?fid=${id}`;
      axios.get(url).then(res => {
        var data = res.data.data[0]
        this.dataForm.title = data.f_title
        this.dataForm.date = data.date
        // this.dataForm.description = data.f_description
        this.dataForm.body_text = data.f_body_text
        // this.dataForm.img = data.f_cover_image ? "/cloud-api" + data.f_cover_image : ''
        this.dataForm.files = JSON.parse(data.f_files);
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__wrapper {
  overflow: hidden !important;
}

::v-deep .el-dialog {
  max-height: 95%;
  margin: auto;
  overflow-y: auto;
  border-radius: 8px;
  margin-top: 20px !important;
}

::v-deep .el-dialog__body {
  width: 90%;
  margin: 0 auto;
  min-height: 700px;
}

.main {
  position: relative;

  h2 {
    border-bottom: 1px #BBBBBB solid;
    font-size: 20px;
    color: #071838;
    text-align: center;
    line-height: 40px;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  label {
    position: absolute;
    right: 0;
  }

  .row {
    margin-top: 50px;
    font-size: 15px;

    ::v-deep img {
      max-width: 100%;
    }
  }
}
</style>
